<template>
  <div class="CatalogFreeAudio">
    <div class="CatalogContent-free-item">
      <p
        @click="GoSingleSetView(FreeList.article_id, FreeList.content_id)"
        class="van-ellipsis"
      >
        {{ FreeList.title }}
      </p>
      <div class="CatalogContent-audio-box">
        <!-- 思路已写好小笔记 -->
        <van-icon
          v-show="FreeList.media_key_full_url != AudioUrl"
          @click="PlayAuto(FreeList.media_key_full_url)"
          name="play"
        />
        <van-icon
          v-show="FreeList.media_key_full_url == AudioUrl"
          @click="PlayAuto()"
          name="pause"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CatalogFreeAudio",
  props: ["FreeList", "AudioUrl"],
  data() {
    return {};
  },
  methods: {
    PlayAuto(AudioUrl) {
      this.$bus.$emit("GetAudioUrl", AudioUrl);
    },
    GoSingleSetView(article_id, content_id) {
      this.$router.push({
        path: "/SingleSetView",
        query: {
          article_id,
          content_id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.CatalogFreeAudio {
  .CatalogContent-free-item {
    padding: 0.625rem 0;
    display: flex;
    justify-content: space-between;
    .CatalogContent-audio-box {
      background-color: white;
      border-radius: 50%;
      padding: 0.25rem;
      box-sizing: border-box;
    }
  }
}
</style>